<template>
    <div id="home">
        <nav-bar>
            <!-- 有具名 -->
            <!-- <template v-slot:left>&lt;</template>   -->
            <template v-slot:default>图书商城</template>
            <!-- <template v-slot:right>&lt;</template>   -->
            <!--默认-->
        </nav-bar>

        <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销', '新书', '精选']"></tab-control>

        <div class="wrapper">
            <div class="content">
                <div ref="banref">
                    <home-swiper :banners="banners"></home-swiper>

                    <recommend-view :recommends="recommends"></recommend-view>
                </div>

                <tab-control @tabClick="tabClick" :titles="['畅销', '新书', '精选']"></tab-control>

                <goods-list :goods="showGoods"></goods-list>
            </div>
        </div>

        <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
    import HomeSwiper from "./ChildComps/HomeSwiper"
    import NavBar from "components/common/navbar/NavBar";
    import RecommendView from "./ChildComps/RecommendView";
    import TabControl from 'components/content/tabControl/TabControl';
    import GoodsList from 'components/content/goods/GoodsList';
    import BackTop from 'components/common/backtop/BackTop';
    import {getHomeAllData, getHomeGoods} from "network/home";
    import {ref, reactive, onMounted, computed, watchEffect, nextTick} from 'vue';
    //引入better-scroll
    import BScroll from 'better-scroll';

    export default {
        name: 'Home',
        setup() {
            //变量
            const recommends = ref([]);
            let isShowBackTop = ref(false)
            let isTabFixed = ref(false)
            const banref = ref(null);
            // const temit = ref(0);

            //商品列表的数据模型
            const goods = reactive({
                sales:{page: 1, list:[]},
                recommend:{page: 1, list:[]},
                new:{page: 1, list:[]},
            })

            let currentType = ref('sales');

            const showGoods = computed(()=>{
                //currentType.value代表  sales  recommend  new 当前的类型
                return goods[currentType.value].list
            })

            let bscroll = reactive({});
            
            let banners = ref([]);

            //onMounted
            onMounted(()=> {
                //请求图书商城推荐商品数据
                getHomeAllData().then(res=>{
                    // console.log(res.goods);
                    recommends.value = res.goods.data;
                    banners.value = res.slides;
                })

                 //请求图书商城 畅销 新书 精选 的数据
                getHomeGoods('sales').then(res=>{
                    goods.sales.list = res.goods.data;
                })
                getHomeGoods('recommend').then(res=>{
                    goods.recommend.list = res.goods.data;
                })
                getHomeGoods('new').then(res=>{
                    goods.new.list = res.goods.data;
                })

                // 创建BetterScroll对象
                bscroll = new BScroll(document.querySelector('.wrapper'), {
                    probeType: 3,  // 0, 1, 2, 3, 3 只要在运动就触发scroll事件  probe侦测滚动的位置
                    click: true, // 是否允许点击
                    pullUpLoad: true //上拉加载更多， 默认是false
                });

                //触发滚动事件
                bscroll.on('scroll', (position)=>{
                    console.log(banref.value.offsetHeight);
                    console.log(-position.y);

                    isShowBackTop.value = isTabFixed.value = (-position.y) > banref.value.offsetHeight;
                })

                //上拉加载数据，触发pullingUp
                bscroll.on("pullingUp", () => {
                    console.log('上拉加载更多...');
                    const page = goods[currentType.value].page + 1;     //page当前页

                    getHomeGoods(currentType.value, page).then(res=>{
                        goods[currentType.value].list.push(...res.goods.data);
                        goods[currentType.value].page += 1;
                    })

                    // 完成上拉， 等数据请求完成， 要将新数据展示出来
                    bscroll.finishPullUp();

                    //重新计算高度
                    bscroll.refresh();

                    console.log("contentheight:"+document.querySelector('.content').clientHeight);
                    console.log("当前类型:" +currentType.value+"，当前页："+ page);
                })



            })
            //onMounted

            const tabClick = (index) => {
                // temit.value = index;     改变类型和页数  就能切换数据

                let types = ['sales', 'new', 'recommend'];

                //currentType.value当前的类型
                currentType.value = types[index];

                // console.log(currentType.value);
                nextTick(()=>{
                    //重新计算高度
                    bscroll && bscroll.refresh();
                    //重新计算BetterScroll，当DOM解构发生变化时，确保滚动效果正常
                })
            }

            //监听任何一个变量有变化
            watchEffect(()=>{          //nextTick 页面和数据渲言完就执行这个方法
                nextTick(()=>{
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
            })

            const bTop = () => {
                // console.log('1111111111');
                bscroll.scrollTo(0, 0, 500);
            }

            return  {
                recommends,
                // temit,
                tabClick,
                goods,
                showGoods,
                isTabFixed,
                banref,
                isShowBackTop,
                bTop,
                banners

            }
        },
        components: {
            NavBar,
            RecommendView,
            TabControl,
            GoodsList,
            HomeSwiper,
            BackTop
        }
    }
</script>

<style scoped>
    .banners img{
        width: 100%;
        height: auto;
    }
    #home {
        height: 100vh;
        position: relative
    }

    .wrapper {
        position: absolute;
        top: 45px;
        bottom: 50px;
        left: 0px;
        right: 0px;
        overflow: hidden;
    }

</style>